<template>
<!-- 注册审核 -->
<div class="shopUser"   v-loading.lock="fullscreenLoading">
    <div class="main_header clearfix">
        <div class="main_header_left fl">
            <img src="~/static/images/blue-spot.png" alt="" class="spot" v-show="queryType=='all'">
            <span @click="searchByType('all')" :class="{cur_operation:queryType=='all'}">全部</span>
            <img src="~/static/images/blue-spot.png" alt="" class="spot" v-show="queryType=='add'">
            <span @click="searchByType('add')" :class="{cur_operation:queryType=='add'}">新用户</span>
            <img src="~/static/images/blue-spot.png" alt="" class="spot" v-show="queryType=='update'">
            <span @click="searchByType('update')" :class="{cur_operation:queryType=='update'}">修改</span>
        </div>
        <div class="main_header_right fr">
            <img src="~/static/images/blue-spot.png" alt="" class="spot"> 供应商名称 <input type="text" placeholder="请输入" v-model="searchText" />
            <no-ssr>
                <el-cascader change-on-select size="large" clearable :options="options" v-model="selectedOptions" @change="city_Change" placeholder="请选择省市区">
                </el-cascader>
            </no-ssr>
            <el-button size="mini" @click.native="resList(1)">搜索</el-button>
        </div>
    </div>
    <div class="main_body">
      <el-table
      :height="getTableHeight"
      :data="shop_regist_data.list"
      style="width: 100%" class="user_list">
      <el-table-column
        label="商户名称">
        <template slot-scope="scope">
        {{ scope.row.name }}
        <p>{{scope.row.newlyIncreased?'新用户':'非新用户'}}</p>
      </template>
      </el-table-column>
      <el-table-column
        label="联系方式">
        <template slot-scope="scope">
          {{scope.row.contactName}} <br/>{{scope.row.contactMobile}}
      </template>
      </el-table-column>
      <el-table-column
        label="地址">
        <template slot-scope="scope">
          {{scope.row.auditInfo.provinceName}} {{scope.row.auditInfo.cityName}} {{scope.row.auditInfo.districtName}}{{scope.row.auditInfo.address}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <p class="lookdetail" @click="look_detail(scope.row.supplyShopId,scope.row.name,scope.row.id);openFullScreen()">审核</p>{{scope.row.createTime}}
      </template>
      </el-table-column>
    </el-table>
        <!-- 用户详情弹框 -->
        <el-card class="box-card user_detail" v-show="user_detail_show">
            <div slot="header" class="clearfix">
                <span @click="update_type='before';curInfo=regist_detial.info" :class="{cur_sel:update_type=='before'}">修改前 <img src="~/static/images/mini-circle.png" alt="" v-show="update_type=='before'"></span>
                <span @click="update_type='after';curInfo=regist_detial.auditInfo" :class="{cur_sel:update_type=='after'}">修改后 <img src="~/static/images/mini-circle.png" alt="" v-show="update_type=='after'"></span>
                <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-close" @click.native="user_detail_show=false;update_type='after'"></el-button>
            </div>
            <div class="body">
                <p class="name">
                    商家名称
                    <span style="margin-left:30px;">{{curName}}</span>
                </p>
                <p class="address">{{curInfo.provinceName}} {{curInfo.cityName}} {{curInfo.districtName}} {{curInfo.address?curInfo.address:'未设置地址'}}
                    <i class="el-icon-location-outline"></i>
                </p>
                <el-row :gutter="20" class="qualified_img">
                    <el-col :span="6">
                        <img :src="curInfo.businessLicenceUrl" alt="" v-if="curInfo.businessLicenceUrl" @click="cur_lookImg=curInfo.businessLicenceUrl;lookImg=true">
                        <p v-else style="color:#aaa;width:100%;height:180px;line-height:180px;">未上传</p>
                        经营性文件
                    </el-col>
                    <el-col :span="6">
                        <img :src="curInfo.idCardFrontUrl" alt="" v-if="curInfo.idCardFrontUrl" @click="cur_lookImg=curInfo.idCardFrontUrl;lookImg=true">
                        <p v-else style="color:#aaa;width:100%;height:180px;line-height:180px;">未上传</p>
                        身份证正面
                    </el-col>
                    <el-col :span="6">
                        <img :src="curInfo.idCardBackUrl" alt="" v-if="curInfo.idCardBackUrl" @click="cur_lookImg=curInfo.idCardBackUrl;lookImg=true">
                        <p v-else style="color:#aaa;width:100%;height:180px;line-height:180px;">未上传</p>
                        身份证背面
                    </el-col>
                    <el-col :span="6">
                        <img :src="curInfo.productAuthUrl" alt="" v-if="curInfo.productAuthUrl" @click="cur_lookImg=curInfo.productAuthUrl;lookImg=true">
                        <p v-else style="color:#aaa;width:100%;height:180px;line-height:180px;">未上传</p>
                        证书
                    </el-col>
                    <el-col :span="6" v-for="(item,index) in curInfo.otherUrls" :key="index">
                        <img :src="item" alt="" @click="cur_lookImg=item;lookImg=true"> 资质认证证书
                    </el-col>
                </el-row>
                <el-row class="assess_btn">
                    <span class="fr" :class="{cur_assess_btn:assess_result=='adopt'}" @click="adopt_method">通过</span>
                    <span class="fr" :class="{cur_assess_btn:assess_result=='refuse'}" @click="refuse_method">拒绝</span>
                </el-row>
            </div>
        </el-card>
        <el-dialog :visible.sync="lookImg" width="500px" top="137px" center class="lookImg">
            <div class="lookImg_div" :style="{backgroundImage: 'url(' + cur_lookImg + ')',backgroundRepeat:'no-repeat',backgroundSize:'contain'}"></div>
        </el-dialog>
        <div class="pagination" v-if="cur_length>0">
          <el-pagination layout="prev, pager, next" :current-page='pageNum' :total="shop_regist_data.totalNum*10" @current-change="resList">
          </el-pagination>
        </div>
    </div>
</div>
</template>

<style lang="scss" scoped>
.shopUser {
  & /deep/ {
    .el-table th.is-leaf, .el-table td {
        border-bottom: none;
    }
    .cur_operation {
      display: inline-block;
      width: 76px;
      height: 28px;
      line-height: 28px;
      border-radius: 27px;
      text-align: center;
      background: #1f8cfc;
      color: #fff;
    }
    .cur_sel {
      background: #eee;
      color: #303133 !important;
    }
    .special-color {
      color: #1f8cfc;
      cursor: pointer;
    }
    .cur_assess_btn {
      background: #1f8cfc;
      color: #fff;
    }
    .spot {
      width: 25px;
      vertical-align: middle;
    }
    .main_header {
      padding: 20px 51px;
      line-height: 49px;
      &_left {
        span {
          margin-right: 40px;
          cursor: pointer;
        }
      }
      &_right {
        input {
          border: none;
          height: 120px;
          height: 28px;
          border-radius: 14px;
          padding: 0 10px;
          margin: 0 24px 0 9px;
          text-align: center;
          background: #eee;
          &:active,
          &:focus,
          &:disabled {
            outline: none;
          }
        }
        .el-button--mini {
          background-color: #1f8cfc;
          color: #fff;
          margin-left: 24px;
        }
        .el-cascader__label {
          padding: 0 25px 0 25px;
        }
      }
    }
    .main_body {
      .user_list{
        text-align: center;
        thead .cell{
          text-align: center;
          color:#1f8cfc;
          font-weight: bold;
          font-size: 16px;
        }
        p{
          color:#1f8cfc
        }
        .lookdetail{
          cursor: pointer
        }
      }
      .user_detail {
        width: 700px;
        border-radius: 10px;
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        .el-card__header {
          span {
            display: inline-block;
            width: 90px;
            height: 29px;
            line-height: 29px;
            border-radius: 5px;
            text-align: center;
            margin-right: 10px;
            cursor: pointer;
            color: #999;
          }
          img {
            width: 15px;
            height: 15px;
            vertical-align: middle;
          }
        }
        .body {
          line-height: 60px !important;
          .name {
            input {
              width: 352px;
              height: 40px;
              border: 1px solid #eee;
              border-radius: 31px;
              text-align: center;
              margin-left: 31px;
              &:active,
              &:focus,
              &:disabled {
                outline: none;
              }
            }
          }
          .qualified_img {
            text-align: center;
            height: 230px;
            overflow: auto;
            img {
              width: 100%;
              height: 180px;
              margin-bottom: -35px;
              cursor: pointer;
            }
          }
          .assess_btn {
            padding-top: 20px;
            span {
              display: inline-block;
              width: 110px;
              height: 38px;
              line-height: 38px;
              text-align: center;
              border-radius: 5px;
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }
      .lookImg {
        &_div {
          width: 100%;
          height: 400px;
        }
      }
    }
  }
  .pagination {
    margin-top: 50px;
    text-align: center;
    & /deep/ {
      .el-pager li,
      .btn-next,
      .btn-prev {
        font-size: 20px !important;
      }
      .el-icon-arrow-left:before,
      .el-icon-arrow-right:before {
        content: "\E606" !important;
        font-size: 20px;
      }
      .el-icon-arrow-right {
        transform: rotate(180deg);
      }
      .el-icon-arrow-right:hover {
        color: #1f8cfc;
      }
      .el-pager li.active {
        color: #1f8cfc;
      }
    }
  }
}
</style>

<script>
if (process.browser) {
  var regionData = require("element-china-area-data").regionData;
}
import {
  getShopAuditList,
  getSupplyShopUserInfo,
  updateShopAuditStatusPass,
  updateShopAuditStatusNoPass,
  getUserAuditList
} from "~/api/";
export default {
  data() {
    return {
      fullscreenLoading: false,
      options: regionData,
      selectedOptions: [],
      update_type: "after", //after表示修改后,before表示修改前
      assess_result: "adopt", //adopt表示通过,refuse表示拒绝
      user_detail_show: false,
      lookImg: false,
      cur_lookImg: "",

      searchText: "", //查询文本
      provinceCode: "", //省编码
      cityCode: "", //市编码
      districtCode: "", //	区编码
      queryType: "all", //查询类型(all:全部,add:新增,update:修改)
      sortType: "asc", //排序类型(asc:升序,desc:倒序)
      pageNum: 1, //页数
      pageSize: 10, //条数
      shop_regist_data: {}, //供应商注册审核数据
      cur_length: 0,
      regist_detial: {}, //存放弹框数据
      curInfo: {}, //存放弹框当前筛选信息
      curName: "", //当前供应商名称
      curId: "" //当前审核id
    };
  },
  beforeMount() {
    this.resList(this.pageNum);
  },
  computed: {
    getTableHeight() {
      return this.$store.state.innerHeight-301
    }
  },
  methods: {
    searchByType(type) {
      this.queryType = type;
      this.resList(1);
    },
    openFullScreen() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 500);
      },
    async resList(pageNum) {
      //请求供应端注册数据
      let res = await getShopAuditList(
        this,
        this.searchText,
        this.provinceCode,
        this.cityCode,
        this.districtCode,
        this.queryType,
        this.sortType,
        pageNum,
        this.pageSize
      );
      if (res.code === "0") {
        this.shop_regist_data = res.data.page;
        this.cur_length = res.data.page.list.length;
        this.pageNum = pageNum;
      } else {
        this.$message.error(res.message);
      }
      console.log(this.shop_regist_data);
    },
    city_Change(value) {
      this.provinceCode = value[0];
      this.cityCode = value[1];
      this.districtCode = value[2];
      // console.log(this.provinceCode);
      // console.log(this.cityCode);
      // console.log(this.cityCode);
    },
    async look_detail(supplyShopId, name, id) {
      //查看详情
      this.curName = name;
      this.curId = id;
      let res = await getSupplyShopUserInfo(this, supplyShopId);
      if (res.code === "0") {
        this.regist_detial = res.data.shopInfo;
        this.curInfo = res.data.shopInfo.auditInfo;
        this.user_detail_show = true;
      } else {
        this.$message.error(res.message);
      }
    },
    async adopt_method() {
      //审核通过
      this.assess_result = "adopt";
      let res = await updateShopAuditStatusPass(this, this.curId);
      console.log(res);
      if (res.code === "0") {
        this.$message.success("审核通过");
        this.user_detail_show = false;
      } else {
        this.$message.error(res.message);
      }
      this.resList(this.pageNum)
    },
    refuse_method() {
      //审核不通过
      this.$prompt("请填写拒绝原因", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/,
        inputErrorMessage: "拒绝原因不能为空"
      })
        .then(async ({ value }) => {
          let res = await updateShopAuditStatusNoPass(this, this.curId, value);
          if (res.code === "0") {
            this.$message.success("已拒绝");
            this.user_detail_show = false;
          }
          this.resList(this.pageNum)
        })
        .catch(() => {});
    }
  }
};
</script>
